<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
  <base href="<%=request.getContextPath()%>/">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Show Question</title>
  <link rel="stylesheet" type="text/css" href="${surl}css/style.css" />
  <link rel="stylesheet" type="text/css" href="${surl}css/question.css" />
  <link rel="stylesheet" type="text/css" href="${surl}css/c_question.css" />
  <style>
    .xm {
      display: inline;
      text-overflow: none; 
      overflow: visible;
      white-space: normal;
    }
  </style>
</head>
<body>
  <c:set var="ql" value="question/qPage"/>
  <c:set var="ud" value="question/updatePage"/>
  <c:set var="del" value="question/delete"/>

  <jsp:include page="head.jsp"></jsp:include>
  <div class="page_disabled"></div>
  <div class="all">
    <div class="nav_words">
      <a href="${ql}">Question Manage</a> >
      Question List
      > <span class="this_id">Question${param.id}</span>
    </div>
    <div class="content">
      <div class="answer_inputrea">
        <ul class="answer_ul">
          <li class="li_group">
            <span class="dec2">QuestionId:</span>
            <span class="content1">Question${param.id}</span>
          </li>
          <li class="li_group">
            <span class="dec2">Question:</span>
            <span class="content1"><xmp class="xm">${question.questionContent}</xmp></span>
          </li>
          <li class="q_answer">
            <span class="dec2">Answer:</span>
            <span class="content1 bg_A">A. <xmp class="xm">${question.answerA}</xmp></span>
          </li>
          <li class="q_answer">
            <span class="content1 bg_B">B. <xmp class="xm">${question.answerB}</xmp></span>
          </li>
          <li class="q_answer">
            <span class="content1 bg_C">C. <xmp class="xm">${question.answerC}</xmp></span>
          </li>
          <li class="q_answer">
            <span class="content1 bg_D last_input">D. <xmp class="xm">${question.answerD}</xmp></span>
          </li>
          <li class="btn_group">
            <a href="${ud}?id=${param.id}">
              <input class="btn btn_question" type="button" value="Edit" style="margin-right: 30px;" />
            </a>
            <input id="delete" class="btn btn_question" type="button"value="Delete" />
          </li>
        </ul>
      </div>
    </div>
  </div>
  <jsp:include page="foot.jsp"></jsp:include>

  <div id="dialog" class="dialog q_dialog">
    <img class="x_close close" src="${surl}images/BTN_Close_16x16.png" />
    <p class="dialog_p">Are you sure to delete it?</p>
    <a href="${del}?id=${param.id}">
      <input style="margin-right: 30px;" class="btn dialog_btn" type="button"value="YES" />
    </a> 
    <input class="btn dialog_btn close" type="button" value="NO" />
  </div>

  <script src="${surl}js/jquery-1.10.2.min.js"></script>
  <script src="${surl}js/s_question.js"></script>
  <script>
  $(function() {
      $(".bg_${question.correctAnswer}").css("background", "#d2dae3");
  })
  </script>
</body>
</body>
</html>